<template>
	<div class="body-hp" style="overflow-y: auto;background-color:#F6F9FE" id="body-hp">
		<HeaDer></HeaDer>
		<div class="flex first">
			<div class="flex space-between breadcrumb">
				<div class="flex">
					<div class="breadcrumb-left">
						当前位置:
					</div>
					<div class="breadcrumb-med">
						<el-breadcrumb separator-class="el-icon-arrow-right">
							<el-breadcrumb-item :to="{ path: '/hp' }">首页</el-breadcrumb-item>
							<el-breadcrumb-item>服务机构</el-breadcrumb-item>
						</el-breadcrumb>
					</div>
				</div>
				<div>
					<div class="demo-input-suffix" style="display: flex;">
						<el-input clearable placeholder="请输入企业名称关键字查询" v-model="dName">
						</el-input>
						<el-button type="success" @click="handleQuery" style="margin-left: 6rem;" size="mini">搜索</el-button>
					</div>
				</div>
			</div>
		</div>
		<div class="top-content-pl body-pl">
			<div class="row-pl" style="background-color:#fff">
				<div class="tabs-pl">
					<div class="left-pl">企业性质：</div>
					<ul class="right-pl right1">
						<li v-for="(item,index) in tabs2_pl" :class="index==0?'on':''" @click="tabs1($event,item.name)" :key="index">{{item.name}}</li>
						<li v-for="dict in dict.type.enterprise_nature"  @click="tabs1($event,dict.value)" :key="dict.value" :value="dict.value">{{dict.label}}</li>
					</ul>
					<!-- <div class="btns-pl" @click="more_pl($event)" style="margin-top:3px">
						<span style="color:#1890ff;">更多</span>
						<i style="color:#1890ff">收起</i>
					</div> -->
				</div>

				<div class="tabs-pl">
					<div class="left-pl">行业类别：</div>
					<ul class="right-pl right2">
						<li v-for="(item,index) in tabs2_pl" :class="index==0?'on':''" @click="tabs2($event,item.name)" :key="index">{{item.name}}</li>
						<li v-for="dict in dict.type.customer_industry_serve" :class="index==0?'on':''" @click="tabs2($event,dict.value)" :key="dict.value" :value="dict.value">{{dict.label}}</li>
					</ul>
					<div class="btns-pl" @click="more_pl2($event)" style="margin-top:3px">
						<span style="color:#1890ff;">更多</span>
						<i style="color:#1890ff">收起</i>
					</div>
				</div>

				<!-- <div class="tabs-pl">
					<div class="left-pl">地域分区：</div>
					<ul class="right-pl right3">
						<li v-for="(item,index) in tabs3_pl" :class="index==0?'on':''" @click="tabs3($event,item.name)" :key="index">{{item.name}}</li>
						<li v-for="list in optionsArea" @click="tabs3($event,list.areaId)">
							<span>{{list.areaName}}</span>
						</li>
					</ul>
					<div class="btns-pl" @click="more_pl3($event)" style="margin-top:3px">
						<span style="color:#1890ff;">更多</span>
						<i style="color:#1890ff">收起</i>
					</div>
				</div> -->
			</div>
		</div>
		<!-- <div v-if="items.length === 0" style="text-align: center;margin-bottom: 50rem; font-size: 16px;">
			<img width="200rem" height="200rem" :src='require("../../assets/images/no-show.png")'/>
		</div> -->
		<ul class="main-pl third">
			<div class="row-pl">
				<li v-for="item in items"  :key="item.deptId" class="flex third-li" style="">
					<div class="con" style="" @click="goDetail(item.deptId)">
							<!-- <div class="con-f" style="">
								技术创新
							</div> -->
							<div :underline="false" :title="item.deptName"  @click="goDetail(item.deptId)" class="con-s" style="overflow-y: hidden;text-overflow: ellipsis;display:-webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;">
								{{ item.deptName }}
							</div>
							<div class="con-t" :title="item.address">
								{{ item.address }}
							</div>
							<div class="flex imgset-xx">
								<div class="box-xx">
									<!-- <img
									@click="route({url:item.URL})"
									width="110rem"
									height="110rem"
									:src='item.url'
								/> -->
								<img
									@click="goDetail(item.deptId)"
									style="max-width: 110rem;max-height: 110rem;"
									:src='item.url'
								/>
								</div>

								<div style="margin-left:15px">
									<el-button style=" border: none;" size="mini">{{ item.contacts }}</el-button><br/>
									<el-button style=" border: none;" size="mini">{{ item.phone }}</el-button><br/>

								</div>
							</div>
							<div style="margin-top:20px;color:#C1C1C1">进入机构
								<i class="el-icon-right"></i>
							</div>
					</div>
				</li>

			</div>
			<el-empty :image-size="200" v-if="items.length == 0"></el-empty>
		</ul>
		<!-- <div class="forth">
			<el-pagination
				background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="currentPage4"
					:page-sizes="[100, 200, 300, 400]"
					:page-size="100"
					layout="total, sizes, prev, pager, next, jumper"
					:total="400">
				</el-pagination>
		</div> -->
		<div class="forth">
				<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getDeptList" :page-sizes="[4]"/>
		</div>
		<FooTer></FooTer>
	</div>
</template>

<script>
import HeaDer from '../../components/HomePage/header'
import { listAreaAll } from "@/api/area/area";
import FooTer from '../../components/HomePage/footer'
import { listDeptAll} from "@/api/system/dept";
export default {
	dicts: ['enterprise_nature', 'customer_industry_serve'],
	name: "body-hp",
	data() {
		return {
			// 查询参数
			queryParams: {
                pageNum: 1,
                pageSize: 4,
                deptName: undefined,
                status: undefined,
				companyType:undefined,
				type:undefined,
				nature:undefined,
				industry:undefined,
				businessCode:undefined
            },
			items:[],
			input1: "",
			activeIndex: "1",
			img_logo: require("../../assets/images/jianshili/hp_logo.png"),
			tabs1_pl:[
				{
					name:"不限",
					value:'不限'
				},
			],
			tabs2_pl:[
				{
					name:"不限",
					value:'不限'
				},
			],
			tabs3_pl:[
				{
					name:"不限",
					value:'不限'
				},
			],
			total:0,
			currentPage1: 5,
        	currentPage2: 5,
        	currentPage3: 5,
        	currentPage4: 1,
			queryParamsArea:{
				pageNum: 1,
                pageSize: 12,
				parentId:undefined
			},
			optionsArea:[],
			newNature:undefined,
			newType:undefined,
			dName:undefined
		};

	},
	components: {
		HeaDer,
		FooTer,

	},
	methods: {

		goDetail(serviceId) {
			this.$router.push("/servicedeta/" + serviceId);
		},
		getDeptList() {
            this.items = [];
            this.queryParams.businessCode = 'enterprise_logo'
            this.queryParams.companyType = "1";
            listDeptAll(this.queryParams).then(response => {
				this.items = response.rows;
				this.total = response.total;
            });
        },
		// getArea(){
		// 	this.optionsArea = []
		// 	this.queryParamsArea.parentId='376cca96-6269-4b0e-80a7-4f3420ee171a'
		// 	listAreaAll(this.queryParamsArea).then(response => {
		// 		console.log(response.data)
        // 		this.optionsArea = response.rows;
      	// 	});
    	// },
		//关键字搜索
		handleQuery() {
			this.queryParams.pageNum = 1;
			this.queryParams.companyType = "1";
			this.queryParams.nature = this.newNature;
			this.queryParams.industry = this.newType;
			this.queryParams.deptName = this.dName;
			// this.queryParams.nature = this.newNature;
			// this.queryParams.industry = this.newType;
			// this.queryParams.deptName = this.dName;
			listDeptAll(this.queryParams).then(response => {
				this.items = response.rows;
				this.total = response.total;
			});
		},
		tabs1(e,value){
			this.items = []
			this.queryParams.companyType = "1";
			this.queryParams.deptName = this.dName;
			if(value=='不限'){
				this.queryParams.nature = undefined;
			}else{
				this.newNature = value;
				this.queryParams.nature = value;
			}
            listDeptAll(this.queryParams).then(response => {
				this.items = response.rows;
				this.total = response.total;
            });
			var tabs1=e.target.parentNode.childNodes;
			for (let i = 0; i < tabs1.length; i++) {
					tabs1[i].classList.remove("on");
			}
			e.target.className="on";
		},
		tabs2(e,value){
			this.items = []
			this.queryParams.companyType = "1";
			this.queryParams.deptName = this.dName;
			if(value=='不限'){
				this.queryParams.industry = undefined;
			}else{
				this.queryParams.newType = value
				this.queryParams.industry = value;
			}
            listDeptAll(this.queryParams).then(response => {
				this.items = response.rows;
				this.total = response.total;
            });
			var tabs2=e.target.parentNode.childNodes;
			for (let i = 0; i < tabs2.length; i++) {
					tabs2[i].classList.remove("on");
			}
			e.target.className="on";
		},
		// tabs3(e,value){
		// 	this.items = []
		// 	this.queryParams.companyType = "1";
		// 	if(value=='不限'){
		// 		this.queryParams.area = undefined;
		// 	}else{
		// 		this.queryParams.area = value;
		// 	}
        //     listDeptAll(this.queryParams).then(response => {
		// 		this.items = response.rows;
		// 		this.total = response.total;
        //     });
		// 	var tabs3=e.target.parentNode.childNodes;
		// 	for (let i = 0; i < tabs3.length; i++) {
		// 			tabs3[i].classList.remove("on");
		// 	}
		// 	e.target.className="on";
		// },
		handleSizeChange(val) {
			this.getDeptList()
        	//console.log(`每页 ${val} 条`);
      	},
      handleCurrentChange(val) {
		this.getDeptList()
        //console.log(`当前页: ${val}`);
      },
		more_pl(e){
			if(e.target.className==="btns-pl"){
			  e.target.className="btns-pl on"
			}else{
			  e.target.className="btns-pl"
			}
			var more_pl = document.querySelector('.right1');
			//console.log(more_pl.className);
			if(more_pl.className==="right-pl right1"){
			  more_pl.className="right-pl right1 on"
			}else{
			  more_pl.className="right-pl right1"
			}
		},
		more_pl2(e){
			if(e.target.className==="btns-pl"){
			  e.target.className="btns-pl on"
			}else{
			  e.target.className="btns-pl"
			}
			var more_pl = document.querySelector('.right2');
			//console.log(more_pl.className);
			if(more_pl.className==="right-pl right2"){
			  more_pl.className="right-pl right2 on"
			}else{
			  more_pl.className="right-pl right2"
			}
		},
		// more_pl3(e){
		// 	if(e.target.className==="btns-pl"){
		// 	  e.target.className="btns-pl on"
		// 	}else{
		// 	  e.target.className="btns-pl"
		// 	}
		// 	var more_pl = document.querySelector('.right3');
		// 	//console.log(more_pl.className);
		// 	if(more_pl.className==="right-pl right3"){
		// 	  more_pl.className="right-pl right3 on"
		// 	}else{
		// 	  more_pl.className="right-pl right3"
		// 	}
		// },
		handleSelect(key, keyPath) {
			//console.log(key, keyPath);
		},
		// setHtmlFonts() {
		// 	var rootElement = document.querySelector("html");
		// 	rootElement.style.fontSize = "1px";
		// },
		// resizeWindow(){
		//  var screenWidth = window.innerWidth;
		//  var Zoom = screenWidth / 1920;
		//  document.body.style.zoom = Zoom.toFixed(2);
		// },
		// resizeWindow() {
		// 	(function (doc, win) {
		// 		var docEl = doc.documentElement,
		// 			resizeEvt =
		// 				"orientationchange" in window ? "orientationchange" : "resize",
		// 			recalc = function () {
		// 				var clientWidth = docEl.clientWidth;
		// 				if (!clientWidth) return;
		// 				docEl.style.fontSize = 1 * (clientWidth / 1920) + "px";
		// 			};

		// 		if (!doc.addEventListener) return;
		// 		win.addEventListener(resizeEvt, recalc, false);
		// 		doc.addEventListener("DOMContentLoaded", recalc, false);
		// 	})(document, window);
		// },
		tab_mouseEnter(e) {
			e.target.className = "on";
		},
		tab_mouseLeave(e) {
			e.target.className = "";
		},
		route(e){
			this.$router.push(e.url)
		},
	},
	created() {
		this.getDeptList();
		//this.getArea();
		// this.setHtmlFonts();
		// this.resizeWindow();
		// this.resizeWindow();
	},
};
</script>

<style lang="scss" scoped>
.first{
	background-color: #f8f9fb;
	width: 100%;
	padding: 10rem;
	.breadcrumb {
		width: 1532rem;
		margin-left: auto;
		margin-right: auto;
		.breadcrumb-left{
			font-size: 18rem;
			color: #000;
			margin-right: 10rem;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.breadcrumb-med{
			display: flex;
			justify-content: center;
			align-items: center
		}
	}
}
.third{
	.third-li{
	background-color: #fff;
	margin-top: 20rem;
	margin-right: 81rem;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
	.con{
		background-color:#fff;
		.con-f{
			font-size:16rem;
			background: linear-gradient(to right, #C0FCC3, #8FFDE3);
			width:90rem;
			padding:2px;
			display: flex;
			justify-content: center;
		}
		.con-s{
			font-size:17rem;
			font-weight:bold;
			color:#000;
			margin-top:10px;
		}
		.con-t{
			overflow-y: hidden;
			text-overflow: ellipsis;
			display:-webkit-box;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
			font-size: 14rem;
			margin-bottom: 30rem;
			margin-top:10px;
			color:#B7B7B7;
		}
	}
	}
}
.imgset-xx{
 .box-xx{
  width: 110rem;
  height: 110rem;
  background-color: #eee;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: center;
  .img{
   max-width: 110rem;
   max-height: 110rem;
  }
 }
}
// 第四个单独需要边距
.third-li:nth-child(4n){
	margin-right: 0;
}
.forth{
	width:1532rem;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:30rem
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
	margin: 0;
	padding: 0;
}
ol,ul {
	list-style: none;
}
h1,h2,h3,h4,h5,h6 {
	font-size: 100%;
	font-weight: normal;
}
.body-pl {
	/* font: 14rem arial; */
	font-size: 16rem;
	font-family:PingFang SC,Microsoft YaHei,Arial, sans-serif;
	color: #676767;
}
.row-pl{
	width:1532rem;
	margin: 0 auto;
}
::v-deep .el-radio-button:first-child .el-radio-button__inner {
	border: none;
}
::v-deep .el-radio-button__inner {
	border: none;
}
.flex {
	display: flex;
}
.space-between {
	display: flex;
	justify-content: space-between;
}
.top-content-pl{
	width: 100%;
}
.top-content-pl>.row-pl{
	box-shadow:0 0 6rem 0 rgba(0, 0, 0, .1);
	padding: 30rem;
	margin-top: 28rem;
	margin-bottom: 30rem;
}
.top-content-pl>.row-pl>.tabs-pl{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	margin-bottom: 18rem;
}
.top-content-pl>.row-pl>.tabs-pl:last-child{
	margin-bottom: 0rem;
}
.top-content-pl>.row-pl>.tabs-pl>.left-pl{
	white-space: nowrap;
	padding-top: 4rem;
}
.top-content-pl>.row-pl>.tabs-pl>.right-pl{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
}
.top-content-pl>.row-pl>.tabs-pl>.right-pl{
	height: 30rem;
	overflow: hidden;
}
.top-content-pl>.row-pl>.tabs-pl>.right-pl.on{
	height: auto;
	overflow: auto;
}
.top-content-pl>.row-pl>.tabs-pl>.right-pl>li{
	margin-right: 40rem;
	padding: 3rem 8rem;
	cursor: pointer;
	margin-bottom: 5rem;
}
.top-content-pl>.row-pl>.tabs-pl>.right-pl>li.on{
	color: #12ba5e;
	background-color: #e9fff3;
}
.top-content-pl>.row-pl>.tabs-pl>.right-pl>li>span{
	pointer-events: none;
}
.top-content-pl>.row-pl>.tabs-pl>.btns-pl{
	padding-right: 22rem;
	background:url(../../assets/images/down.png) no-repeat scroll;
	background-position: right center;
	cursor: pointer;
	white-space: nowrap;
	height: 24rem;
}
.top-content-pl>.row-pl>.tabs-pl>.btns-pl.on{
	padding-right: 22rem;
	background:url(../../assets/images/up.png) no-repeat scroll;
	background-position: right center;
}
.top-content-pl>.row-pl>.tabs-pl>.btns-pl>i{
	font-style: normal;
	display: none;
	pointer-events: none;
}
.top-content-pl>.row-pl>.tabs-pl>.btns-pl>span{
	pointer-events: none;
}
.top-content-pl>.row-pl>.tabs-pl>.btns-pl.on>span{
	display: none;
}
.top-content-pl>.row-pl>.tabs-pl>.btns-pl.on>i{
	font-style: normal;
	display: block;
}
/* 回到顶部 end*/
.body-hp {
	height: 100%;
	width: 100%;
	/* font: 14rem arial; */
	font-size: 14rem;
	font-family: PingFang SC, Microsoft YaHei, Arial, sans-serif;
	color: #676767;
}
.main-pl{
	width: 100%;
	padding-bottom: 66rem;
}
.main-pl>.row-pl{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	// display: flex;
	// justify-content: space-between;
	// justify-content: flex-start;
	flex-wrap: wrap;
	padding-bottom: 50rem;
}
.main-pl li{
	width: 21%;
	height:320rem;
	// background: url(../../assets/images/pl-bg1_03.jpg) no-repeat scroll;
	background-size: 100% 100%;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	padding:20rem 30rem 20rem 18rem
}
.main-pl li>.left-pl{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
}
.main-pl li>.left-pl>img{
	width: 82rem;
	height: 150rem;
}
.main-pl li>.right-pl{
	padding-top: 20rem;
	padding-left: 15rem;
}
.main-pl li>.right-pl>.title-pl{
	font-size: 18rem;
	margin-bottom: 15rem;
}
.main-pl li>.right-pl>.content-pl{
	overflow-y: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	font-size: 14rem;
	margin-bottom: 30rem;
}
.main-pl li>.right-pl>.bottom-pl{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	justify-content: space-between;
	font-size: 14rem;
}
.main-pl li>.right-pl>.bottom-pl>button{
	font-size: 14rem;
	color: #35a266;
	border: solid 1px #35a266;
	background-color: white;
	padding: 4rem 15rem;
	cursor: pointer;
}
.main-pl li>.right-pl>.bottom-pl>.left-pl>span{
	background-color: #e6e8f3;
	color: #62667d;
	padding:2rem 12rem;
	margin-right: 10rem;
}
.main-pl li>.right-pl>.bottom-pl>.left-pl>span.color-gold{
	background-color: #f0eedb;
}
.main-pl li>.right-pl>.bottom-pl>.left-pl>i{
	background-color: #ebfff4;
	color: #087d40;
	padding:2rem 12rem;
	font-style: normal;
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled):hover{
	color: #35a266;
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active{
	background-color: #35a266;
}
</style>
